<!DOCTYPE html>
<html>
<head>
    <title>E8NET</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <include file="./App/Admin/View/Include/css.html" />

    <!-- this page specific styles -->
    <link rel="stylesheet" href="__PUBLIC__/Admin/css/compiled/chart-showcase.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="__PUBLIC__/Admin/css/compiled/index.css" type="text/css" media="screen" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

    <include file="./App/Admin/View/Include/navbar.html" />
    <include file="./App/Admin/View/Include/menu.html" />

	<!-- main container -->
    <div class="content">

        <div class="container-fluid">
            <div id="pad-wrapper">
                <!-- App日流量统计表 -->
                <div class="row-fluid">
                    <h4 class="title">Morris.js stacked</h4>
                    <div class="span12">
                        <h5>Quarterly Apple iOS device unit sales</h5>
                        <br />
                        <div id="hero-area" style="height: 250px;"></div>
                    </div>
                </div>

                <!-- App日注册用户统计表 -->
                <div class="row-fluid section">
                    <h4 class="title">Morris.js <small>Monthly growth</small></h4>
                    <div class="span12 chart">
                        <div id="hero-graph" style="height: 230px;"></div>
                    </div>
                </div>

                <!-- table sample -->
                <!-- the script for the toggle all checkboxes from header is located in js/theme.js -->
                <div class="table-products section">

                    <div class="row-fluid head">
                        <div class="span12">
                            <h4>Products <small>Table sample</small></h4>
                        </div>
                    </div>

                    <div class="row-fluid filter-block">
                        <div class="pull-right">
                            <a class="btn-flat new-product">+ Refresh</a>
                        </div>
                    </div>

                    <div class="row-fluid">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th class="span3">
                                    <input type="checkbox" />
                                    Product
                                </th>
                                <th class="span3">
                                    <span class="line"></span>Description
                                </th>
                                <th class="span3">
                                    <span class="line"></span>Status
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <!-- row -->
                            <tr class="first">
                                <td>
                                    <input type="checkbox" />
                                    <div class="img">
                                        <img src="__PUBLIC__/Admin/img/table-img.png" />
                                    </div>
                                    <a href="#">There are many variations </a>
                                </td>
                                <td class="description">
                                    if you are going to use a passage of Lorem Ipsum.
                                </td>
                                <td>
                                    <span class="label label-success">Active</span>
                                    <ul class="actions">
                                        <li><i class="table-edit"></i></li>
                                        <li><i class="table-settings"></i></li>
                                        <li class="last"><i class="table-delete"></i></li>
                                    </ul>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <!--<div class="pagination">-->
                        <!--<ul>-->
                            <!--<li><a href="#">&#8249;</a></li>-->
                            <!--<li><a class="active" href="#">1</a></li>-->
                            <!--<li><a href="#">2</a></li>-->
                            <!--<li><a href="#">3</a></li>-->
                            <!--<li><a href="#">4</a></li>-->
                            <!--<li><a href="#">&#8250;</a></li>-->
                        <!--</ul>-->
                    <!--</div>-->
                    <div>More Templates <a href="http://www.17sucai.com/" target="_blank" title="17素材网">17素材网</a> - Collect from <a href="http://www.17sucai.com/" title="网页模板" target="_blank">网页模板</a></div>
                </div>
                <!-- end table sample -->

            </div>
        </div>
    </div>
    <!-- end main container -->

    <include file="./App/Admin/View/Include/js.html" />


    <!-- build the charts -->
    <script type="text/javascript">


        // Morris Line Chart
        var tax_data = [
            {"period": "2014-04", "visits": 2407, "signups": 660},
            {"period": "2014-03", "visits": 3351, "signups": 729},
            {"period": "2014-02", "visits": 2469, "signups": 1318},
            {"period": "2014-01", "visits": 2246, "signups": 461},
            {"period": "2012-12", "visits": 3171, "signups": 1676},
            {"period": "2012-11", "visits": 2155, "signups": 681},
            {"period": "2012-10", "visits": 1226, "signups": 620},
            {"period": "2012-09", "visits": 2245, "signups": 500}
        ];
        Morris.Line({
            element: 'hero-graph',
            data: tax_data,
            xkey: 'period',
            xLabels: "month",
            ykeys: ['visits', 'signups'],
            labels: ['Visits', 'User signups']
        });



        // Morris Area Chart
        Morris.Area({
            element: 'hero-area',
            data: [
                {period: '2010 Q1', iphone: 2666, ipad: null, itouch: 2647},
                {period: '2010 Q2', iphone: 2778, ipad: 2294, itouch: 2441},
                {period: '2010 Q3', iphone: 4912, ipad: 1969, itouch: 2501},
                {period: '2010 Q4', iphone: 3767, ipad: 3597, itouch: 5689},
                {period: '2011 Q1', iphone: 6810, ipad: 1914, itouch: 2293},
                {period: '2011 Q2', iphone: 5670, ipad: 4293, itouch: 1881},
                {period: '2011 Q3', iphone: 4820, ipad: 3795, itouch: 1588},
                {period: '2011 Q4', iphone: 15073, ipad: 5967, itouch: 5175},
                {period: '2012 Q1', iphone: 10687, ipad: 4460, itouch: 2028},
                {period: '2012 Q2', iphone: 8432, ipad: 5713, itouch: 1791}
            ],
            xkey: 'period',
            ykeys: ['iphone', 'ipad', 'itouch'],
            labels: ['iPhone', 'iPad', 'iPod Touch'],
            lineWidth: 2,
            hideHover: 'auto',
            lineColors: ["#81d5d9", "#a6e182", "#67bdf8"]
          });

    </script>

</body>
</html>